<template>
    <div class="tabs">
        <el-tabs type="border-card" justify="space-center" tab-size="large">
            <el-tab-pane label="个人中心" type="flex" class="el-tabs">
                <PersonalForm></PersonalForm>
            </el-tab-pane>
            <!-- 机票查询历史部分 -->

            <el-tab-pane label="历史查询记录" class="history">
                <el-row type="flex" justify="space-center">
                    <!-- 下拉选择 -->
                    <el-select size="mini" v-model="airport" placeholder="起飞日期" >
                        <el-option v-for="(item, index) in $store.state.air.history" :key="index" :label="item.departDate"
                            :value="item.departDate">
                        </el-option>
                    </el-select>
                </el-row>
                <div>
                    <el-row type="flex" justify="space-between" align="middle" class="history-item"
                        v-for="(item, index) in $store.state.air.history" :key="index">
                        <nuxt-link
                            :to="`/air/flights?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`">
                            <div class="air-info">

                                <div class="to-from">{{ item.departCity }} - {{ item.destCity }}</div>
                                <p>{{ item.departDate }}</p>
                            </div>
                            <!-- <span>选择</span> -->
                        </nuxt-link>
                        <span @click="del(index)">删除</span>
                    </el-row>
                </div>
            </el-tab-pane>

            <!-- 机票订单部分 -->
            <el-tab-pane label="机票订单">
                <div>
                    <jipiaolist></jipiaolist>
                </div>
            </el-tab-pane>
            <el-tab-pane label="最近酒店查看历史">
                <div>
                    <hotelHistory></hotelHistory>
                </div>
            </el-tab-pane>

        </el-tabs>

    </div>
</template>
<script>
import PersonalForm from '@/components/user/PersonalForm'
import jipiaolist from '@/pages/jipiaolist'
import hotelHistory from '@/pages/hotel/hotelHistory'
export default {
    data() {
        return {
            name: `"${this.$store.state.user.userInfo.user.username}"`
        }
    },
    components: {
        PersonalForm,jipiaolist,hotelHistory
    },
    methods: {

        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        del(index){//历史记录删除
            // console.log(index)
            this.$store.commit("air/delHistory", index)
            // this.history.splice(index,1)
            // console.log(this.history)
        },        

    }
}
</script>
<style scoped lang="less">
.tabs {
    width: 1000px;
    margin: 0 auto;
}

.el-tabs {
    height: auto;
}

.margin-top {
    height: 200px;
    font-size: medium;
    font-weight: bold;
}

.history {
    border: 1px #ddd solid;
    padding: 10px;
    margin-top: 10px;

    h5 {
        font-size: 16px;
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: 1px #eee solid;
    }

    .history-item {
        padding: 10px 0;
        font-size: 14px;
        border-bottom: 1px #eee solid;

        &:last-child {
            border: none;
        }

        .to-from {
            margin-bottom: 5px;
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
        }

        p {
            font-size: 20px;
            color: #666;
        }

        span {
            color: #fff;
            display: block;
            padding: 2px 10px;
            background: orange;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }
    }
}
</style>